<template>
  <div class="right">
    <div class="head">
      <span :class="active == 1 ? 'active' : ''" @click="changeActive(1)">
        宏观数据填报
      </span>
      <span :class="active == 2 ? 'active' : ''" @click="changeActive(2)">
        作战图数据
      </span>
      <span :class="active == 3 ? 'active' : ''" @click="changeActive(3)">
        产业目录导航
      </span>
      <span :class="active == 4 ? 'active' : ''" @click="changeActive(4)">
        产业现状图谱
      </span>
      <span :class="active == 5 ? 'active' : ''" @click="changeActive(5)">
        产业招商地图&360企业画像
      </span>
      <span :class="active == 6 ? 'active' : ''" @click="changeActive(6)">
        园区信息管理
      </span>
    </div>
    <div class="content">
      <Fill v-if="active == 1" />
      <ZzPic v-if="active == 2" />
      <Chain v-if="active == 3" />
      <Atlas v-if="active == 4" />
      <Map v-if="active == 5" />
      <Park v-if="active == 6" />
    </div>
  </div>
</template>

<script>
import Fill from "./dataPage/fill";
import ZzPic from "./dataPage/zzPic";
import Chain from "./dataPage/chain";
import Atlas from "./dataPage/atlas";
import Map from "./dataPage/map";
import Park from "./dataPage/park";

export default {
  data() {
    return {
      active: 1,
    };
  },
  components: {
    ZzPic,
    Chain,
    Atlas,
    Map,
    Park,
    Fill,
  },
  created() {
    this.active = localStorage.getItem("activePage") || 1;
  },
  methods: {
    changeActive(index) {
      if (index == 1) {
        localStorage.setItem("activeType", 1);
      }
      localStorage.setItem("activePage", index);
      this.active = index;
    },
  },
};
</script>

<style lang="less" scoped>
.right {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: hidden;
  .head {
    padding-left: 20px;
    height: 80px;
    line-height: 80px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #446db3;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(4, 0, 0, 0.1);
    text-align: left;
    span {
      margin-right: 75px;
      display: inline-block;
      height: 80px;
      font-size: 20px;
      font-weight: 400;
      color: #333333;
      cursor: default;
    }
    span.active {
      font-weight: bold;
      color: #446db3;
      border-bottom: 4px solid #446db3;
    }
  }
  .content {
    height: calc(100% - 80px);
    padding: 30px 20px 0;
    overflow: hidden;
  }
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */

/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  .right .head span {
    margin-right: 50px !important;
    font-size: 18px !important;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  .right .head span {
    margin-right: 50px !important;
    font-size: 18px !important;
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  .right .head span {
    margin-right: 30px !important;
    font-size: 18px !important;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .right .head span {
    margin-right: 30px !important;
    font-size: 14px !important;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  
    .right .head span {
    margin-right: 10px !important;
    font-size: 14px !important;
  }
}
</style>
